<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情页</title>
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/table.css">
    <link rel="stylesheet" href="/css/detail.css">
</head>
<body>
    <div class="导航栏">
        <h1>收银台</h1>
        <ol>
            <li><a href="/register.html">注册账号</a></li>
            <li><a href="/login.html">切换账号</a></li>
            <li><a href="/product/create.html">上架商品</a></li>
            <li><a href="/product/list.html">浏览商品</a></li>
            <li><a href="/product/update.html">更新商品</a></li>
            <li><a href="/order/list.html">浏览订单</a></li>
            <li><a href="/order/create.html">购买商品</a></li>
        </ol>
    </div>
    <div class="功能区">
        <div class="基本信息">
            <div>
                <span>【用户名称】：</span>
                <span th:text="${order.username}"></span>
            </div>


            <div>
                <span>【订单编号】：</span>
                <span th:text="${order.uuid}"></span>
            </div>


            <div>
                <span>【订单状态】：</span>
                <span th:text="${order.status}"></span>
            </div>


            <div>
                <span>【创建时间】：</span>
                <span th:text="${order.createdAt}"></span>
            </div>


            <div>
                <span>【应付金额】：</span>
                <span th:text="${order.payable}"></span>
            </div>


            <div>
                <span>【实付金额】：</span>
                <span th:text="${order.actual}"></span>
            </div>
        </div>


        <!-- 只有在订单处于未支付状态时，这个 div 才会被添加 -->
        <div class="下一步" th:if="${order.status} eq 'unpaid'">
            <a th:href="'/order/confirm/' + ${order.orderId}">确认</a>
            <a th:href="'/order/cancel/' + ${order.orderId}">取消</a>
        </div>

        <table>
            <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>单位</th>
                <th>应付</th>
                <th>实付</th>
            </tr>
            </thead>
            <tbody>
            <!-- 这个写法是 thymeleaf 的语法，遍历每个 order-items 项，进行展示（一个 <tr>） -->
            <tr th:each="item : ${order.itemList}">
                <td th:text="${item.id}"></td>
                <td th:text="${item.name}"></td>
                <td th:text="${item.price}"></td>
                <td th:text="${item.number}"></td>
                <td th:text="${item.unit}"></td>
                <td th:text="${item.payable}"></td>
                <td th:text="${item.actual}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
</html>